<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="submit">上传</button>
    <input id="file" type="file" />
    <!--导入sdk文件-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "oss-cn-beijing",
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: "LTAI5tBWSfGYWw9cveErF9iU",
        accessKeySecret: "eUPnw9SrEgFpbxyZDBKfYckToZuAQN",
        // 从STS服务获取的安全令牌（SecurityToken）。
        //stsToken: "yourSecurityToken",
        // 填写Bucket名称，例如examplebucket。
        bucket: "zddsc",
      });

      const headers = {
        // 指定该Object被下载时的网页缓存行为。
        "Cache-Control": "no-cache",
        // 指定该Object被下载时的名称。
        "Content-Disposition": "example.txt",
        // 指定该Object被下载时的内容编码格式。
        "Content-Encoding": "utf-8",
        // 指定过期时间，单位为毫秒。
        Expires: "1000",
        // 指定Object的存储类型。
        "x-oss-storage-class": "Standard",
        // 指定Object标签，可同时设置多个标签。
        "x-oss-tagging": "Tag1=1&Tag2=2",
        // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
        "x-oss-forbid-overwrite": "true",
      };

      // 指定上传到examplebucket的Object名称，例如exampleobject.txt。
      const name = "a-a.jpg";
      // 获取DOM。
      const submit = document.getElementById("submit");
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          console.log(p);
        },
        // 设置并发上传的分片数量。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };

      // 监听按钮。
      submit.addEventListener("click", async () => {
        try {
          const data = document.getElementById("file").files[0];
          // 分片上传。
          const res = await client.multipartUpload(name, data, {
            ...options,
            // 设置上传回调。
            // 如果不涉及回调服务器，请删除callback相关设置。
            // callback: {
            //   // 设置回调请求的服务器地址。
            //   url: "http://examplebucket.aliyuncs.com:23450",
            //   // 设置回调请求消息头中Host的值，即您的服务器配置Host的值。
            //   host: "yourHost",
            //   /* eslint no-template-curly-in-string: [0] */
            //   // 设置发起回调时请求body的值。
            //   body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
            //   // 设置发起回调请求的Content-Type。
            //   contentType: "application/x-www-form-urlencoded",
            //   customValue: {
            //     // 设置发起回调请求的自定义参数。
            //     var1: "value1",
            //     var2: "value2",
            //   },
            // },
          });
          console.log(res);
        } catch (err) {
          console.log(err);
        }
      });
    </script>
  </body>
</html>